<template>
  <div class="step-three">
    <m-form
      ref="form3"
      :model="formData"
      label-width="190px"
      label-position="right"
    >
      <m-form-item
        prop="classifi1"
        required
        label="请选择包装一级分类："
        v-if="formData.mer_type == 0 || formData.mer_type == 2"
      >
        <div class="itemBox">
          <span
            class="item transition"
            :class="formData.type_1_list.includes(item.id) ? 'active' : ''"
            :data-id="item.id"
            :data-name="item.cate_name"
            @click="selectCate1"
            v-for="(item, index) in cate1"
            :key="index"
            >{{ item.cate_name }}</span>
        </div>
      </m-form-item>
      <m-form-item
        prop="classifi2"
        required
        label="请选择服务一级分类："
        v-if="formData.mer_type == 1 || formData.mer_type == 2"
      >
        <div class="itemBox">
          <!-- :class="formData.type_2_list.includes(item.id) ? 'active' : ''" -->
          <span
            class="item"
            :class="{ active : formData.type_2_list.includes(item.id)}"
            :data-id="item.id"
            :data-name="item.cate_name"
            @click="selectCate2"
            v-for="(item, index) in cate2"
            :key="index"
            >{{ item.cate_name }}</span>
        </div>
      </m-form-item>
      <m-form-item>
        <m-checkbox v-model="formData.agreement">
        </m-checkbox>
        我已阅读、理解并同意找包装网的
        <span class="keywords" @click.stop="centerDialogVisible = true">商家入驻规则</span>。
      </m-form-item>
    </m-form>
    <!-- 平台规则 -->
    <Dialog
      :title="platformRules.title"
      :visible.sync="centerDialogVisible"
      width="30%"
      class="plat-rules"
      center>
      <span v-html="platformRules.content"></span>
    </Dialog>
  </div>
</template>

<script>
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MSelect from "@/components/common/m-select/MSelect"
import MCheckbox from "@/components/common/m-checkbox/MCheckbox"
import MButton from "@/components/common/m-button/MButton"
import { Dialog } from 'element-ui'
import { getProductsCategory,platformRules } from "@/request/api"

export default {
  name: "StepThree",
  components: { MButton, MCheckbox, MSelect, MFormItem, MForm, Dialog },
  props: {
    formData: ""
  },
  data() {
    return {
      cate1: [],
      cate2: [],
      platformRules:{},
      centerDialogVisible: false
    }
  },
  created() {
    this.getCate1()
    this.getCate2()
    this.getPlatformRules()
  },
  methods: {
    getPlatformRules() {
      platformRules(1).then(res => {
        if(res.status === 200) {
          this.platformRules = res.data
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    getCate1() {
      let data = {
        is_entity: 1,
        limit: 0,
        pid: 0
      }
      getProductsCategory(data).then(res => {
        this.cate1 = res.data.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    getCate2() {
      let data = {
        is_entity: 0,
        limit: 0,
        pid: 0
      }
      getProductsCategory(data).then(res => {
        this.cate2 = res.data.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    selectCate1(e) {
      if (this.formData.type_1_list.length == 8) {
        this.$toastVant("最多选择8个包装分类！")
        return false
      }
      var id = e.target.dataset.id
      id = parseInt(id)
      var has = false
      var index
      this.formData.type_1_list.forEach((item, i) => {
        if (item == id) {
          has = true
          index = i
        }
      })
      if (has) {
        this.formData.type_1_list.splice(index, 1)
      } else {
        this.formData.type_1_list.push(id)
      }
    },
    selectCate2(e) {
      if (this.formData.type_2_list.length == 5) {
        this.$toastVant("最多选择5个服务分类！")
        return false
      }
      var id = e.target.dataset.id
      id = parseInt(id)
      var has = false
      var index
      this.formData.type_2_list.forEach((item, i) => {
        if (item == id) {
          has = true
          index = i
        }
      })
      if (has) {
        this.formData.type_2_list.splice(index, 1)
      } else {
        this.formData.type_2_list.push(id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.plat-rules /deep/ .el-dialog__body {
  height: 350px;
  overflow-y: auto;
}

.step-three {
  width: 1000px;
  .itemBox {
    width: 780px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .item {
      width: 150px;
      height: 45px;
      background-color: #f3f4f6;
      border: solid 1px #eaeaea;
      border-radius: 10px;
      line-height: 45px;
      margin-bottom: 15px;
      text-align: center;
      margin-right: 15px;
      cursor: pointer;
    }
    .active {
      background: $theme-color-1;
      border-color: $theme-color-1;
      color: #fff;
    }
  }
  .keywords {
    color: $theme-color-1;
    cursor: pointer;
  }
}
</style>
